<template>
  <van-nav-bar
    :title="title"
    :left-text="leftText"
    :right-text="rightText"
    @click-left="onClickLeft"
    @click-right="onClickRight"
    class="MMNavBar"
  >
    <!-- 左侧 -->
    <template #left v-if="showBack">
      <!-- <slot name="left"></slot> -->
      <!-- 直接写死 iconfont中的返回按钮即可 -->
      <i class="iconfont iconbtn_nav_back"></i>
    </template>
    <!-- 标题 -->
    <template #title>
      <slot name="title"></slot>
    </template>
    <!-- 右侧 -->
    <template #right>
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  // 给组件起个名字
  name: 'MMNavBar',
  // props: ['title', 'leftText', 'rightText'],
  // 使用对象的写法来实现
  props: {
    title: {
      type: String
    },
    leftText: {
      type: String
    },
    rightText: {
      type: String
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      // 默认值
      default: true
    }
  },
  methods: {
    // 事件处理
    onClickLeft () {
      this.$emit('onClickLeft')
    },
    onClickRight () {
      this.$emit('onClickRight')
    }
  }
}
</script>

<style lang="less">
.MMNavBar {
  .iconbtn_nav_back {
    font-size: 44px;
    color: @black-color;
  }
}
</style>
